<template>
	<div class="cartcontrol">
		<transition name="move">
			<div class="cart-decrease" v-show="food.count>0" @click="decreaseCart">
				<i class="inner icon-remove_circle_outline"></i>
			</div>
		</transition>
		<div class="cart-count" v-show="food.count>0">{{food.count}}</div>
		<div class="cart-add icon-add_circle" @click="addCart"></div>
	</div>
</template>

<script type="text/ecmascript-6">
	import Vue from 'vue';
	export default {
		props: {
			food: {
				type: Object
			}
		},
		methods: {
			addCart(event) {
				if (!event._constructed) {
					return;
				}
				if (!this.food.count) {
					Vue.set(this.food, 'count', 1);
				} else {
					this.food.count ++;
				}
				this.$emit('addCart', event.target);
			},
			decreaseCart(event) {
				if (!event._constructed) {
					return;
				}
				if (this.food.count) {
					this.food.count --;
				}
			}
		}
	};
</script>

<style lang="stylus" rel="stylesheet/stylus">
	.cartcontrol
		font-size 0px
		.cart-decrease, .cart-count, .cart-add
			display inline-block
			font-size 14px
			line-height 14px
			padding 6px
			vertical-align top
		.cart-decrease, .cart-add
			color rgb(0, 160, 220)
		.cart-count
			padding-left 0px
			padding-right 0px
			font-size 10px
			width 12px
			text-align center
			color rgb(147, 153, 139)
		.cart-decrease
			transition all .3s linear
			transform translate3d(0, 0, 0)
			.inner
				display inline-block
				transition all .4s linear
			&.move-enter, &.move-leave-active
				opacity 0
				transform translate3d(24px, 0, 0)
				.inner
					transform rotate(180deg)
</style>